<template>
  <div class="copy-test-event">
    <h1>{{ message }}</h1>
    <p>在实际开发中经常会用到复制功能，简单总结几种常用的方式。</p>
    <section>
        <h3>一、利用clipboard.js</h3>
        <p>优势：兼容性好</p>
        <p><a href="https://clipboardjs.com/">官网传送门</a></p>
        <div class="test-copy-1">
            <span id="share-code">{{copyTxt1}}</span>
            <button class="copy-btn" data-clipboard-action="copy" data-clipboard-target="#share-code" @click="copy">复制</button>
        </div>
        
        <code>
            <pre>
&lt;p id="share-code"&gt;{{copyTxt1}}&lt;/p&gt;
&lt;button class="copy-btn" data-clipboard-action="copy" data-clipboard-target="#share-code" @click="copy"&gt;复制&lt;/button&gt;

        copyTxt1: string = '要复制的内容？'
        copy (): void {
            var clipboard = new Clipboard('.copy-btn');
            clipboard.on('success', e => {
                console.error('复制成功,开心吗？Ctrl+V 试试');
                // 释放内存
                clipboard.destroy();
            })
            clipboard.on('error', e => {
                // 不支持复制
                console.error('该浏览器不支持自动复制')
                // 释放内存
                clipboard.destroy()
            })
        }
            </pre>
        </code>
    </section>
    <section>
        <h3>二、document.execCommand</h3>
        <p>其中分为两小类</p>
        <ul>
            <li>利用input 或者 textarea 进行复制，缺点复制出来时纯文本。(clipboard.js 有用到这个方法)</li>
            <li>利用 createRange()进行复制，可复制出dom 结构</li>
        </ul>
        <h4>1、利用input 或者 textarea</h4>
        <div>
            <div class="test-copy-1">
                <input v-model="testCopy2" id="testCopy2"/>
                <button @click="copy2">复制试试</button>
            </div>
            <code>
                <pre>
        &lt;input v-model="testCopy2" id="testCopy2"/&gt;
        &lt;button @click="copy2"&gt;复制试试&lt;/button&gt;

        testCopy2: string = '测试input复制'
        copy2 () : void {
            (document.getElementById('testCopy2') as HTMLInputElement).select();
            document.execCommand("copy");
        }
                </pre>
            </code>
        </div>
        <h4>2、利用 createRange()进行复制</h4>
        <div class="test-copy-1">
            <button @click="copy3">点我复制下面表格试试</button>
        </div>
        <table id="testCopy3">
            <tbody style="text-align:center">
                <tr>
                    <td>数据1</td>
                    <td>我是复制表格数据1</td>
                    <td>我是复制表格数据1</td>
                </tr>
                <tr>
                    <td>数据2</td>
                    <td>我是复制表格数据2</td>
                    <td>我是复制表格数据2</td>
                </tr>
            </tbody>
        </table>
        <code>
            <pre>
                &lt;button @click="copy3"&gt;点我复制下面表格试试&lt;/button&gt;
                &lt;table id="testCopy3"&gt;
                    &lt;tbody style="text-align:center"&gt;
                        &lt;tr&gt;
                            &lt;td&gt;数据1&lt;/td&gt;
                            &lt;td&gt;我是复制表格数据1&lt;/td&gt;
                            &lt;td&gt;我是复制表格数据1&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;数据2&lt;/td&gt;
                            &lt;td&gt;我是复制表格数据2&lt;/td&gt;
                            &lt;td&gt;我是复制表格数据2&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
            </pre>
        </code>
    </section>
    <section>
        <h3>三、利用setData() 进行复制</h3>
        <div>
            <div>
                <span id="testcopy4" style="margin-right:20px">选中我，复制试试</span><button @click="triggerCopy">换IE点我复制试试</button>
            </div>
            <p class="test-copy-1">要想不做选中手动复制，该方法只能在IE 中用，其他浏览器clipboardData只在复制过程中才会生效</p>
        </div>
        <code>
            <pre>
        &lt;span id="testcopy4" style="margin-right:20px"&gt;选中我，复制试试&lt;/span&gt;&lt;button @click="triggerCopy"&gt;换IE点我复制试试&lt;/button&gt;

        copy4 (event) : any {
            alert('滚');
            event.preventDefault();
            if(event.clipboardData){
                return event.clipboardData.setData("Text", 'value');
            }else if((window as any).clipboardData){
                return (window as any).clipboardData.setData("Text", 'value');
            }
        }
        triggerCopy () : void {
            // 在 IE 中
            var myEvent = new Event('copy');

            (document.getElementById('testcopy4') as HTMLElement).dispatchEvent(myEvent);
        }
        mounted () {
            (document.getElementById('testcopy4') as HTMLElement).addEventListener('copy', this.copy4);
        }
            </pre>
        </code>
    </section>
    <p class="page-end">The End</p>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';
    import Clipboard from 'clipboard';

    @Component({
        // 所有的组件选项都可以放在这里
    })
    export default class copyTest extends Vue {
        // data 在这
        message: string = 'js 复制'

        copyTxt1: string = '要复制的内容？'
        copy (): void {
            var clipboard = new Clipboard('.copy-btn');
            clipboard.on('success', e => {
                console.error('复制成功,开心吗？Ctrl+V 试试');
                // 释放内存
                clipboard.destroy();
            })
            clipboard.on('error', e => {
                // 不支持复制
                console.error('该浏览器不支持自动复制')
                // 释放内存
                clipboard.destroy()
            })
        }

        testCopy2: string = '测试input复制'
        copy2 () : void {
            (document.getElementById('testCopy2') as HTMLInputElement).select();
            document.execCommand("copy");
        }

        copy3 () : void {
            let body = document.body as any;
            let range = null as any;
            let sel = null as any;
            let el = document.getElementById('testCopy3') as HTMLElement;

            if (document.createRange && window.getSelection) {
                range = document.createRange();
                sel = window.getSelection();
                sel.removeAllRanges();
                try {
                    range.selectNodeContents(el);
                    sel.addRange(range);
                } catch (e) {
                    range.selectNode(el);
                    sel.addRange(range);
                }
            } else if (body.createTextRange) {
                //ie
                range = body.createTextRange();
                range.moveToElementText(el);
                range.select();
                document.execCommand("copy");
            } else {
                console.error('不支持复制');
            }

            document.execCommand("copy");
        }

        copy4 (event) : any {
            alert('滚');
            event.preventDefault();
            if(event.clipboardData){
                return event.clipboardData.setData("Text", 'value');
            }else if((window as any).clipboardData){
                return (window as any).clipboardData.setData("Text", 'value');
            }
        }
        triggerCopy () : void {
            // 在 IE 中
            var myEvent = new Event('copy');

            (document.getElementById('testcopy4') as HTMLElement).dispatchEvent(myEvent);
        }
        mounted () {
            (document.getElementById('testcopy4') as HTMLElement).addEventListener('copy', this.copy4);
        }
    }
</script>
<style lang="scss">
.copy-test-event{
    .test-copy-1{
        padding-bottom: 20px;
    }
    #testCopy3{
        margin-bottom: 20px;
    }
}
</style>